<template>
  <view class="page">
    <image :src="saasInfo.mini_app_logo" v-if="saasInfo.mini_app_logo" mode="aspectFill" class="logo mt-100"></image>
    <view v-else class="logo mt-100"></view>
    <view class="fs-32 text-color-222 font-wight-700 mt-80">
      {{saasInfo.platform_name || ''}}
    </view>
    <button v-if="is_new_user" @click.stop class="auth-btn mt-100" open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber" scope="phoneNumber">
      授权手机号登录
    </button>
    <button v-else @click.stop="handleLogin" class="auth-btn mt-100">
      一键登录
    </button>
    <view class="footer flex-center animated" :class="{ shake: shakeStatus }"
      :style="'background-image: url('+ loginBg +')'">
      <view class="mt-100 flex">
        <u-checkbox-group v-model="checked">
          <u-checkbox activeColor="#2196F3" name="true" label=" "></u-checkbox>
        </u-checkbox-group>
        <text class="fs-26"> 勾选即表示同意</text>
        <text class="fs-26" style="color: #2196F3;" @click="goAgreement(1)">《用户协议》</text>
        和
        <text class="fs-26" style="color: #2196F3;" @click="goAgreement(2)">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        checked: false,
        shakeStatus: false,
        is_new_user: false,
        data: {},
        saasInfo: {}
      };
    },
    onLoad() {
      this.preLogin()
      this.$http.post('/client/index/getSaasBaseConfigs').then(res => {
        if (res.code == 1) {
          this.saasInfo = res.data
        }
      })
    },
    methods: {
      goAgreement(type) {
        let url = ''
        if (type == 1) {
          const agreementParam = {
            url: '/client/index/getArticleList',
            param: {
              article_type: 'agreement',
            },
            title: '用户协议'
          }
          url = `/commonPages/richTextPage/richTextPage?option=${encodeURIComponent(JSON.stringify(agreementParam))}`
        } else {
          const privacyParam = {
            url: '/client/index/getArticleList',
            param: {
              article_type: 'privacy_policy',
            },
            title: '隐私政策'
          }
          url = `/commonPages/richTextPage/richTextPage?option=${encodeURIComponent(JSON.stringify(privacyParam))}`
        }
        this.$tools.jumpTo(url)
      },
      handleLogin() {
        if (!this.checked) {
          this.shakeStatus = true;
          setTimeout(() => {
            this.shakeStatus = false;
          }, 500);
          return;
        }
        uni.$u.toast('登录成功~')
        this.setToken(this.data.token)
        this.setUserInfo({
          ...this.data
        })
        setTimeout(() => {
          this.getUserInfo().then(res => {
            console.log('res: ', res);
          })
          this.$tools.naviBackEmit('reload')
        }, 1000)
      },
      getPhoneNumber(e) {
        if (!this.checked) {
          this.shakeStatus = true;
          setTimeout(() => {
            this.shakeStatus = false;
          }, 500);
          return;
        }
        let code = e.detail.code
        uni.login({
          provider: 'weixin',
          success: loginRes => {
            let js_code = loginRes.code
            this.$http.post('/client/userCenter/login', {
              js_code,
              code
            }).then(res => {
              if (res.code == 1) {
                this.setToken(res.data.token)
                this.setUserInfo({
                  ...res.data
                })
                this.isRegister = false
                setTimeout(() => {
                  this.$tools.naviBackEmit('reload')
                }, 1000)
              }
            })
          }
        });
      },
      preLogin() {
        uni.login({
          provider: 'weixin',
          success: loginRes => {
            let js_code = loginRes.code
            this.$http.post('/client/userCenter/login', {
              js_code
            }).then(res => {
              if (res.code == 1 && res.data.is_new_user == 1) {
                //未注册
                this.is_new_user = true
              } else if (res.code == 1 && res.data.is_new_user !== 1) {
                this.isRegister = false
                this.data = {
                  ...res.data
                }
              }
            })
          }
        });
      }
    },
  }
</script>

<style lang="scss" scoped>
  .auth-btn {
    margin: 60rpx auto 0;
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    background-color: #74C0FF;
    border-radius: 100rpx;
    color: #fff;
    text-align: center;
  }

  .logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
  }

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  @keyframes shake {

    0%,
    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }
  }
</style>